<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站选择测试页面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .content-auto {
            content-visibility: auto;
        }
        
        .test-form {
            max-width: 600px;
            margin: 0 auto;
            padding: 2rem;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="test-form">
        <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">网站选择功能测试</h1>
        
        <!-- 原始网站选择下拉框 -->
        <div class="mb-6">
            <label for="websiteSelect" class="block text-sm font-medium text-gray-700 mb-2">原始网站选择下拉框</label>
            <select id="websiteSelect" 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200">
                <option value="">请选择网站</option>
                <option value="niuke">牛客网</option>
                <option value="niumin">牛面</option>
            </select>
        </div>
        
        <!-- 简化版网站选择下拉框 -->
        <div class="mb-6">
            <label for="simpleWebsiteSelect" class="block text-sm font-medium text-gray-700 mb-2">简化版网站选择下拉框</label>
            <select id="simpleWebsiteSelect" 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200">
                <option value="">请选择网站</option>
                <option value="niuke">牛客网</option>
                <option value="niumin">牛面</option>
            </select>
        </div>
        
        <!-- 网站选择按钮组 -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">网站选择按钮组（备选方案）</label>
            <div class="flex flex-wrap gap-3">
                <button id="btnNiuke" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                    牛客网
                </button>
                <button id="btnNiumin" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                    牛面
                </button>
            </div>
        </div>
        
        <!-- URL输入框 -->
        <div class="mb-6">
            <label for="urlInput" class="block text-sm font-medium text-gray-700 mb-2">URL输入</label>
            <input type="text" id="urlInput" 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" 
                placeholder="请输入包含面试题的网页地址">
        </div>
        
        <!-- 调试信息 -->
        <div class="mt-6 p-4 bg-gray-50 rounded-lg">
            <h3 class="font-medium text-gray-800 mb-2">调试信息</h3>
            <pre id="debugInfo" class="text-sm text-gray-600 whitespace-pre-wrap"></pre>
        </div>
    </div>

    <script>
        // 添加事件监听器和调试信息
        document.addEventListener('DOMContentLoaded', function() {
            const debugInfo = document.getElementById('debugInfo');
            
            // 原始网站选择下拉框事件
            document.getElementById('websiteSelect').addEventListener('change', function() {
                debugInfo.textContent += `\n原始下拉框选择: ${this.value}`;
                updateUrlPlaceholder(this.value);
            });
            
            // 简化版网站选择下拉框事件
            document.getElementById('simpleWebsiteSelect').addEventListener('change', function() {
                debugInfo.textContent += `\n简化下拉框选择: ${this.value}`;
            });
            
            // 按钮点击事件
            document.getElementById('btnNiuke').addEventListener('click', function() {
                debugInfo.textContent += '\n按钮选择: 牛客网';
                updateUrlPlaceholder('niuke');
            });
            
            document.getElementById('btnNiumin').addEventListener('click', function() {
                debugInfo.textContent += '\n按钮选择: 牛面';
                updateUrlPlaceholder('niumin');
            });
            
            // 更新URL输入框占位符
            function updateUrlPlaceholder(website) {
                const urlInput = document.getElementById('urlInput');
                
                if (website === 'niuke') {
                    urlInput.placeholder = '请输入牛客网包含面试题的网页地址，如 https://www.nowcoder.com/...';
                } else if (website === 'niumin') {
                    urlInput.placeholder = '请输入牛面包含面试题的网页地址，如 https://www.niumin.com/...';
                } else {
                    urlInput.placeholder = '请输入包含面试题的网页地址';
                }
            }
            
            // 输出初始DOM信息用于调试
            setTimeout(function() {
                const websiteSelectElement = document.getElementById('websiteSelect');
                debugInfo.textContent = `DOM元素检查:\n`;
                debugInfo.textContent += `- 网站选择下拉框存在: ${websiteSelectElement !== null}\n`;
                debugInfo.textContent += `- 下拉框选项数量: ${websiteSelectElement.options.length}\n`;
                debugInfo.textContent += `- 下拉框样式: ${websiteSelectElement.className}\n`;
                debugInfo.textContent += `- 下拉框显示状态: ${getComputedStyle(websiteSelectElement).display}\n`;
                debugInfo.textContent += `- 下拉框可见性: ${getComputedStyle(websiteSelectElement).visibility}\n`;
                debugInfo.textContent += `- 下拉框宽度: ${getComputedStyle(websiteSelectElement).width}\n`;
                debugInfo.textContent += `\n操作日志:`;
            }, 500);
        });
    </script>
</body>
</html>